<script setup lang="ts">
import Content from '@/components/Content/index.vue'
import ContentTitle from '@/components/ContentTitle/index.vue'
import { ArrowRightBold } from '@element-plus/icons-vue'
import APIWallet from '@/api/wallet'
import SelfPagination from '@/components/SelfPagination/index.vue'
import { ElLoading } from 'element-plus'

const list = ref<any>([])

const loading = shallowRef<boolean>(false)

const $router = useRouter()

function handleJumpBilling() {
    $router.push({
        name: 'Billing'
    })
}

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})
const total = shallowRef<number>(0)

function getList() {
    loading.value = true
    APIWallet.getInvoiceList(queryParams.value).then(({ data, total: count }) => {
        list.value = data
        total.value = count
    }).finally(() => {
        loading.value = false
    })
} getList()

const dialogVisible = shallowRef<boolean>(false)

const invoiceDeail = ref<any>({})

function getInvoiceDeail(row: any) {
    const loading = ElLoading.service({ lock: true })

    APIWallet.getInvoiceDeail(row.id).then(({ data }) => {
        invoiceDeail.value = data
        dialogVisible.value = true
    }).finally(() => {
        loading.close()
    })
}

</script>

<template>
    <div class="invoice">
        <Content class="invoice-content">
            <div class="invoice-title">
                <ContentTitle title="发票中心" content="请认证填写您的开票信息；" />
                <div class="jump" @click="handleJumpBilling">申请开票 <el-icon>
                        <ArrowRightBold />
                    </el-icon>
                </div>
            </div>
            <el-table class="list" :data="list" :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                v-loading="loading">
                <el-table-column align="center" prop="invoice_code" label="流水号" />
                <el-table-column align="center" prop="amount" label="开票金额" />
                <el-table-column align="center" prop="type_name" label="开票类型" />
                <el-table-column align="center" prop="create_time" label="申请时间" />
                <el-table-column align="center" prop="status_name" label="发票状态" />
                <el-table-column align="center" label="操作">
                    <template #default="{ row }">
                        <el-button type="primary" link class="btn">下载</el-button>
                        <el-button type="primary" link class="btn" @click="getInvoiceDeail(row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <SelfPagination style="margin-top: 50px;margin-right: 30px;" :total="total"
                v-model:current-page="queryParams.page" :page-size="queryParams.limit" @get-list="getList" />
        </Content>
        <el-dialog v-model="dialogVisible" title="发票详情" width="800" destroy-on-close :show-close="false">
            <template #header>
                <DialogClose title="发票详情" @close="dialogVisible = false" />
            </template>
            <div class="details">
                <div class="details-title">
                    <div>{{ invoiceDeail?.order_code }}</div>
                    <div>发票信息</div>
                    <div>下载</div>
                </div>
                <div class="details-content">
                    <div class="details-content-item">
                        <div class="details-content-item-label">发票号：</div>
                        <div class="details-content-item-value">{{ invoiceDeail?.invoice_code }}</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">发票金额：</div>
                        <div class="details-content-item-value">￥ {{ invoiceDeail?.amount }}</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">所属账号：</div>
                        <div class="details-content-item-value">89837@xinanyuansu.com</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">发票性质：</div>
                        <div class="details-content-item-value">电子发票</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">发票类型：</div>
                        <div class="details-content-item-value">增值税普通发票</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">发票抬头：</div>
                        <div class="details-content-item-value">{{ invoiceDeail?.invoice_title }}</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">企业税号：</div>
                        <div class="details-content-item-value">91430111MA4RBH1K53</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">开户银行：</div>
                        <div class="details-content-item-value">{{ invoiceDeail?.bank_name }}</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">银行账户：</div>
                        <div class="details-content-item-value">{{ invoiceDeail?.bank_number }}</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">公司地址：</div>
                        <div class="details-content-item-value">{{ invoiceDeail?.enterprise_address }}</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">公司电话：</div>
                        <div class="details-content-item-value">{{ invoiceDeail?.enterprise_phone }}</div>
                    </div>
                    <div class="details-content-item">
                        <div class="details-content-item-label">电子邮箱：</div>
                        <div class="details-content-item-value">{{ invoiceDeail?.send_email }}</div>
                    </div>

                    <div class="details-content-item">
                        <div class="details-content-item-label">发票备注：</div>
                        <div class="details-content-item-value">{{ invoiceDeail?.remark }}</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss">
.invoice {
    .list {
        .el-table__row {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }

        .cell {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }

        .btn {
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }
}
</style>
<style lang="scss" scoped>
.invoice {

    .details {
        padding: 0 126px;

        .details-content {
            margin-top: 36px;

            .details-content-item {
                display: flex;
                margin-bottom: 11px;

                .details-content-item-label {
                    color: #101010;
                    font-size: 14px;
                }

                .details-content-item-value {
                    color: #3894FF;
                }
            }

        }

        .details-title {
            display: flex;
            gap: 0 10px;

            div {
                font-size: 14px;

                &:nth-child(1) {
                    color: rgba(136, 136, 136, 1);
                }

                &:nth-child(2) {
                    color: rgba(16, 16, 16, 1);
                }

                &:nth-child(3) {
                    color: rgba(56, 148, 255, 1);
                    cursor: pointer;
                }
            }
        }


    }

    .invoice-content {
        .invoice-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .jump {
                color: rgba(56, 148, 255, 1);
                font-size: 14px;
                cursor: pointer;
                display: flex;
                align-items: center;
                font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
            }
        }
    }

    .list {
        margin-top: 15px;
        width: 99.99%;
    }
}
</style>
